<template>
  <div class="w-1/3 mx-auto mt-40 shadow-2xl shadow-blue-300 rounded-box">
    <div class="avatar flex justify-center pt-4">
      <div class="w-24 rounded-full">
        <label for="avatar-input" class="cursor-pointer">
          <img :src="currentAvatarUrl" />
        </label>
      </div>
    </div>

    <input
      class="hidden"
      id="avatar-input"
      type="file"
      accept="image/*"
      @change="handleAvatarChange"
    />

    <div class="w-3/4 mx-auto">
      <label class="input input-bordered flex items-center gap-2 my-4">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          class="h-4 w-4 opacity-70"
        >
          <path
            d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z"
          />
        </svg>
        <input type="text" class="grow" value="Alex" disabled />
      </label>

      <ul
        class="menu bg-base-200 rounded-box"
        v-if="classInChargeArr.length > 0"
      >
        <li>
          <details open>
            <summary>Class In Charge</summary>
            <ul>
              <li v-for="(classItem, idx) in classInChargeArr" :key="idx">
                <a class="pointer-events-none"
                  >Class {{ classItem.split('|')[0] }} | Year
                  {{ classItem.split('|')[1] }}</a
                >
              </li>
            </ul>
          </details>
        </li>
      </ul>
    </div>

    <div class="text-center">
      <button class="btn btn-primary my-2" @click="onClick">
        Update Avatar
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { storeToRefs } from 'pinia';

import { useUserStore } from '@/stores/user';

import { uploadAvatar } from '@/services/apiStorage';
import { getTeacherByTeacherId } from '@/services/apiTeacher';
import { getConfig } from '@/utils/configHelper';

const userStore = useUserStore();

const { updateUser } = userStore;
const { user } = storeToRefs(userStore);

const currentAvatarUrl = ref(
  'https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp'
);
const avatarFile = ref(null);

function handleAvatarChange(event) {
  const file = event.target.files[0];
  avatarFile.value = file;

  const newAvatarUrl = URL.createObjectURL(file);
  currentAvatarUrl.value = newAvatarUrl;
}

async function onClick() {
  if (!avatarFile.value) {
    // TODO: Warning toast
    return;
  }

  const data = await uploadAvatar(avatarFile.value);

  updateUser(data.user.user_metadata);
}

const classInChargeArr = ref([]);

onMounted(async () => {
  currentAvatarUrl.value = user.value.avatar;
  const token = getConfig('SUPABASE_TOKEN');
  const userToken = JSON.parse(localStorage.getItem(token));

  console.log(userToken.user.id);
  const teachers = await getTeacherByTeacherId(userToken.user.id);

  classInChargeArr.value = JSON.parse(teachers[0].class_in_charge);
});
</script>
